﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>修改管理员密码</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/admin/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>账户管理</el-breadcrumb-item>
                <el-breadcrumb-item>修改密码</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="修改密码" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item label="当前账户">
                                {{info.userName}}
                            </el-form-item>
                            <el-form-item prop="password" label="当前密码">
                                <el-input show-password v-model="model.password" placeholder="必填，最少6位英文字母"></el-input>
                            </el-form-item>
                            <el-form-item prop="newPassword" label="新密码">
                                <el-input show-password v-model="model.newPassword" placeholder="必填，最少6位英文字母"></el-input>
                            </el-form-item>
                            <el-form-item prop="confirmPassword" label="确认密码">
                                <el-input show-password v-model="model.confirmPassword" placeholder="必填，最少6位英文字母"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm">确认保存</el-button>
                <el-button plain @@click="resetForm">取消返回</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/admin/js/axios.config.js"></script>
    <script>
        var validatePass = function (rule, value, callback) {
            if (value === '') {
                callback(new Error('请输入确认密码'));
            } else if (value !== ve.model.newPassword) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                info: [],//用户信息
                model: {
                    password: null,
                    newPassword: null,
                    confirmPassword: null
                },
                rules: {
                    password: [
                        { required: true, message: '请输入当前登录密码', trigger: 'blur' },
                        { min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
                        { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '必须英文字母数字组合', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
                        { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '必须英文字母数字组合', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    //当前用户信息
                    AxiosAjax({
                        url: '/admin/info',
                        loading: true,
                        success: function (res) {
                            _this.info = res.data
                        }
                    });
                },
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        AxiosAjax({
                            method: 'put',
                            url: '/admin/password',
                            data: _this.model,
                            loading: true,
                            successMsg: '修改密码已成功',
                            success: function (res) {
                                _this.$refs['editForm'].resetFields();//重置表单
                            }
                        });
                    })
                },
                resetForm() {
                    window.history.back(-1);
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
